<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- Template $Revision: 1.7 $ applied. -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="en-us" />
<title>Working with the Spry Accordion widget</title>
<link href="../../css/articles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>Working with the Spry Accordion widget</h1>
<p>A Spry widget is a page element that combines HTML, CSS and JavaScript data 
  to enable user interaction. The Spry framework for Ajax supports a set of 
  reusable widgets written in standard HTML, CSS, and JavaScript code. A version of this file is available on <a href="http://livedocs.adobe.com/en_US/Spry/SDG/index.html" target="_blank">Adobe LiveDocs</a>. Please check it for comments and updates.
  <!-- -->
  <!-- -->
</p>
<h3 id="about">About Spry widgets</h3>
<p>A <dfn>Spry widget</dfn> is a page element that combines HTML, CSS 
  and JavaScript code to enable user interaction. A Spry widget is made up of the 
  following parts:</p>
<dl>
  <dt>Widget structure </dt>
  <dd> An HTML code block that defines the structural composition of the 
    widget.<br />
  </dd>
  <dt>Widget behavior </dt>
  <dd> JavaScript code that controls how the widget responds to user-initiated 
    events.<br />
  </dd>
  <dt>Widget styling </dt>
  <dd> CSS code that specifies the appearance of the widget.
  </dd>
</dl>
<p>The Spry framework supports a set of reusable widgets written in standard 
  HTML, CSS, and JavaScript code. You can easily insert these widgets—the code is 
  HTML and CSS at its simplest—and then style the widget. The behaviors in the 
  framework include functionality that lets users show or hide content on the 
  page, change the appearance (such as color) of the page, interact with menu 
  items, and much more.</p>
<p>Each widget in the Spry framework is associated with unique CSS and 
  JavaScript files, available on Adobe Labs. The CSS file contains everything 
  necessary for styling the widget, and the JavaScript file gives the widget its 
  functionality. The CSS and JavaScript files associated with a given widget are 
  named after the widget, so it’s easy for you to know which files correspond to 
  which widgets. (For example, the files associated with the Accordion widget are 
  called SpryAccordion.css and SpryAccordion.js).</p>
<!-- -->
<h3>About Spry widget accessibility and JavaScript 
  degradation</h3>
<p>It is critical to the usability of the widget that it be accessible when 
  following established web navigation conventions. You can’t assume that the user 
  is using a mouse, and therefore Adobe has taken steps to ensure that all aspects 
  of the currently available widgets are accessible through the keyboard. In the 
  Accordion widget, for example, you can use up and down arrow keys to open 
  content panels. Adobe encourages all widget developers to build in this kind of 
  functionality.</p>
<p>It’s also impossible to control the end user’s environment. Adobe develops 
  widgets to ensure that when JavaScript is turned off, all the content of the 
  widget is still available on the screen. While this will most likely affect the 
  page layout, it is more important that the content of the widget still be 
  available, especially when working with disclosure widgets. Adobe ensures that 
  default CSS states do not set visibility to hidden, 
  and that HTML code is not positioned off screen.</p>
<!-- -->
<!-- -->
<h2>Before you begin</h2>
<!-- -->
<h3 id="prepare">Prepare your files</h3>
<p>Before you add Spry widgets to your web pages, download and link the 
  appropriate files.</p>
<ol>
  <li><span>Locate the Spry ZIP file on the Adobe® Labs 
    website.</span> </li>
  <li><span>Download and unzip the Spry ZIP file to your hard 
    drive.</span> </li>
  <li><span>Open the unzipped Spry folder and locate the 
    widgets folder. This folder contains all of the files necessary for adding and 
    styling Spry widgets.</span> </li>
  <li><span>Add widget files to your website by doing one of 
    the following:</span>
      <ul>
        <li> Copy the widgets folder and paste or drag a copy of it to the root 
          directory of your web site. If you do this, you will have all of the files 
          necessary for all of the widgets that Spry supports. </li>
        <li> Create a folder in your website (for example, a folder called <dfn>SpryAssets</dfn>), open the widgets folder, and copy only the 
          files or folders that pertain to the widgets you want to add. For example, 
          to add only an Accordion widget to your web pages, copy the accordion 
          folder, or the SpryAccordion.js and SpryAccordion.css files.</li>
      </ul>
    <span class="notetitle">Note: </span>If you drag the original 
    widgets folder or individual files out of the unzipped Spry folder, the demos 
    in the Spry folder won’t work properly. Be sure to copy and paste to your 
    website instead of dragging.</li>
  <li><span>When the correct widget JavaScript and CSS files 
    are part of your website, you are ready to link them and add Spry widgets to 
    your pages. For specific instructions on adding each widget to a page, see the 
    individual widget sections.</span> </li>
</ol>
<!-- -->
<h2>Working with the Accordion widget</h2>
<!-- -->
<h3 id="overview">Accordion widget overview and structure</h3>
<p>An Accordion widget is a set of collapsible panels that can store a large 
  amount of content in a compact space. Site visitors hide or reveal the content 
  stored in the accordion by clicking the tab of the panel. The panels of the 
  accordion expand or contract accordingly as the visitor clicks different tabs. 
  In an accordion, only one content panel is open and visible at a given time. The 
  following example shows an Accordion widget, with the second panel expanded:</p>
<img class="smallImage" id="accordian_anatomy_02" alt="" 
src="accordion_anatomy_02.gif" /> <br />
          <dl>
            <dt>A. </dt>
            <dd>Accordion panel tab </dd>
            <dt>B. </dt>
            <dd>Accordion panel content </dd>
            <dt>C. </dt>
            <dd>Accordion panel (open) </dd>
          </dl>
          <p>The default HTML code for the Accordion widget comprises an outer div tag that contains all of the panels, a div tag for each panel, and a header div and content div within the tag 
            for each panel. An Accordion widget can contain any number of individual panels. 
            The HTML code for the Accordion widget also includes script tags in the head of the document and after the 
            accordion’s HTML code.</p>
          <p>The script tag in the head of the document defines 
            all of the JavaScript functions related to the Accordion widget. The script tag after the Accordion widget code creates a 
            JavaScript object that makes the accordion interactive. Following is the HTML 
            code for an Accordion widget: </p>
          <pre>&lt;head&gt;
...
	&lt;!--Link the CSS style  sheet that styles the accordion--&gt;
	&lt;link href=&quot;SpryAssets/SpryAccordion.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; /&gt;
	&lt;!--Link the Spry Accordion JavaScript library--&gt;
	&lt;script src=&quot;SpryAssets/SpryAccordion.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
	&lt;!--Create the Accordion widget and assign classes to each element--&gt;
	&lt;div id=&quot;Accordion1&quot; class=&quot;Accordion&quot;&gt;
		&lt;div class=&quot;AccordionPanel&quot;&gt;
			&lt;div class=&quot;AccordionPanelTab&quot;&gt;Panel 1&lt;/div&gt;
			&lt;div class=&quot;AccordionPanelContent&quot;&gt;
				Panel 1 Content&lt;br/&gt;
				Panel 1 Content&lt;br/&gt;
				Panel 1 Content&lt;br/&gt;
			&lt;/div&gt;
		&lt;/div&gt;
		&lt;div class=&quot;AccordionPanel&quot;&gt;
			&lt;div class=&quot;AccordionPanelTab&quot;&gt;Panel 2&lt;/div&gt;
			&lt;div class=&quot;AccordionPanelContent&quot;&gt;
				Panel 2 Content&lt;br/&gt;
				Panel 2 Content&lt;br/&gt;
				Panel 2 Content&lt;br/&gt;
			&lt;/div&gt;
		&lt;/div&gt;
		&lt;div class=&quot;AccordionPanel&quot;&gt;
			&lt;div class=&quot;AccordionPanelTab&quot;&gt;Panel 3&lt;/div&gt;
			&lt;div class=&quot;AccordionPanelContent&quot;&gt;
				Panel 3 Content&lt;br/&gt;
				Panel 3 Content&lt;br/&gt;
				Panel 3 Content&lt;br/&gt;
			&lt;/div&gt;
		&lt;/div&gt;
		&lt;div class=&quot;AccordionPanel&quot;&gt;
			&lt;div class=&quot;AccordionPanelTab&quot;&gt;Panel 4&lt;/div&gt;
			&lt;div class=&quot;AccordionPanelContent&quot;&gt;
				Panel 4 Content&lt;br/&gt;
				Panel 4 Content&lt;br/&gt;
				Panel 4 Content&lt;br/&gt;
			&lt;/div&gt;
		&lt;/div&gt;
	&lt;/div&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
	var Accordion1 = new Spry.Widget.Accordion(&quot;Accordion1&quot;);
&lt;/script&gt;
&lt;/body&gt;</pre>
          <p>In the code, the new JavaScript operator 
            initializes the Accordion widget object, and transforms the div content with the ID of Accordion1 from static HTML code into an interactive page 
            element. The Spry.Widget.Accordion method is a 
            constructor in the Spry framework that creates accordion objects, and the 
            information necessary to initialize the object is contained in the 
            SpryAccordion.js JavaScript library that you linked to in the head of the 
            document.</p>
          <p>Each of the div tags in the Accordion widget 
            contains a CSS class. These classes control the style of the Accordion widget, 
            and exist in the accompanying SpryAccordion.css file. </p>
          <p>You can change the appearance of any given part of the Accordion widget by 
            editing the CSS code that corresponds to the class names assigned to it in the 
            HTML code. For example, to change the background color of the accordion’s tabs, 
            edit the AccordionPanelTab rule in the 
            SpryAccordion.css file. Keep in mind that changing the CSS code in the 
            SpryAccordion.css file will affect all accordions that are linked to that 
            file.</p>
          <p>In addition to the classes shown in the HTML code, the Accordion widget 
            includes certain default behaviors that are attached to the widget. These 
            behaviors are a built‑in part of the Spry framework, and are in the 
            SpryAccordion.js JavaScript library file. The Accordion library includes 
            behaviors related to hovering, tab clicking (to open panels), panel focus, and 
            keyboard navigation.</p>
          <p>You can change the look of the accordion as it relates to these behaviors by 
            editing the appropriate classes in the SpryAccordion.css file. If for some 
            reason you want to remove a given behavior, you can delete the CSS rules that 
            correspond to that behavior.</p>
          <span class="notetitle">Note: </span>While you can change the look 
        of the accordion as it relates to a certain behavior, you cannot alter the 
        built‑in behaviors themselves. For example, Spry still places an 
        AccordionFocused class on an accordion in focus, even if no properties are set 
        for the AccordionFocused class in the SpryAccordion.css file.
          <h4>Variation on tags used for Accordion widget 
            structure</h4>
          <p>In the preceding example, div tags create a nested 
            tag structure for the widget:</p>
          <pre>Container div
	Panel div
		Tab div
		Content div</pre>
          <p>This 3-level, 4-container structure is essential for the Accordion widget to 
            work properly; the structure, however, is more important than the actual tags 
            you decide to use. Spry reads the structure (not div tags necessarily) and builds the widget accordingly. As long as the 3-level, 
            4-container structure is in place, you can use any block-level element to create 
            the widget:</p>
          <pre>Container div 
	Panel div 
		H3 tag 
		P tag</pre>
          <p>The div tags in the example are flexible and can 
            contain other block-level elements. A p tag (or any 
            other inline tag), however, cannot contain other block-level elements, so you 
            cannot use it as a container or panel tag for the 
            accordion.</p>
          <!-- -->
          <h3 id="css">CSS code for the Accordion widget</h3>
          <p>The SpryAccordion.css file contains the rules that style the Accordion 
            widget. You can edit these rules to style the accordion’s look and feel. The 
            names of the rules in the CSS file correspond directly to the names of the 
            classes specified in the Accordion widget’s HTML code.</p>
          <span class="notetitle">Note: </span>You can replace style-related 
        class names in the SpryAccordion.css file and HTML code with class names of your 
        own. Doing so does not affect the functionality of the widget, as CSS code is 
        not required for widget functionality.
          <p>The default functionality for the behaviors classes at the end of the style 
            sheet are defined in the JavaScript library file SpryAccordion.js. You can 
            change the default functionality by adding properties and values to the behavior 
            rules in the style sheet.</p>
          <p>The following is the CSS code for the SpryAccordion.css file:</p>
          <pre>/*Accordion styling classes*/
.Accordion {
	border-left: solid 1px gray;
	border-right: solid 1px black;
	border-bottom: solid 1px gray;
	overflow: hidden;
}
.AccordionPanel {
	margin: 0px;
	padding: 0px;
}
.AccordionPanelTab {
	background-color: #CCCCCC;
	border-top: solid 1px black;
	border-bottom: solid 1px gray;
	margin: 0px;
	padding: 2px;
	cursor: pointer;
}
.AccordionPanelContent {
	overflow: auto;
	margin: 0px;
	padding: 0px;
	height: 200px;
}
.AccordionPanelOpen .AccordionPanelTab {
	background-color: #EEEEEE;
}
.AccordionPanelClosed .AccordionPanelTab {
}
/*Accordion behaviors  classes*/
.AccordionPanelTabHover {
	color: #555555;
}
.AccordionPanelOpen .AccordionPanelTabHover {
	color: #555555;
}
.AccordionFocused .AccordionPanelTab {
	background-color: #3399FF;
}
.AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
	background-color: #33CCFF;
}</pre>
          <p>The SpryAccordion.css file contains extensive comments, explaining the code 
            and the purpose for certain rules. For further information, see the comments in 
            the file.</p>
          <!-- -->
          <h3 id="insert">Insert the Accordion widget</h3>
          <ol>
            <li><span>Locate the SpryAccordion.js file and add it to your 
              web site. You can find the SpryAccordion.js file in the widgets/accordion 
              directory, located in the Spry directory that you downloaded from Adobe Labs. 
              </span>
                <p>For example, create a folder called <dfn>SpryAssets</dfn> in the 
                  root folder of your web site, and move the SpryAccordion.js file to it. The 
                  SpryAccordion.js file contains all of the information necessary for making the 
                  Accordion widget interactive.</p>
            </li>
            <li><span>Locate the SpryAccordion.css file and add it to 
              your web site. You might choose to add it to the main directory, a SpryAssets 
              directory, or to a CSS directory if you have one.</span> </li>
            <li><span>Open the web page to add the Accordion widget to 
              and link the SpryAccordion.js file to the page by inserting the following script tag in the page’s head tag:</span>
                <pre>&lt;script src=&quot;SpryAssets/SpryAccordion.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt; </pre>
                <p>Make sure that the file path to the SpryAccordion.js file is correct. This 
                  path varies depending on where you’ve placed the file in your web site.</p>
            </li>
            <li><span>Link the SpryAccordion.css file to your web page by 
              inserting the following link tag in the page’s head 
              tag:</span>
                <pre>&lt;link href=&quot;SpryAssets/SpryAccordion.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; /&gt; </pre>
                <p>Make sure that the file path to the SpryAccordion.css file is correct. This 
                  path varies depending on where you’ve placed the file in your web site.</p>
            </li>
            <li><span>Add the accordion to your web page by inserting the 
              following div tag where you want the accordion to 
              appear on the page:</span>
                <pre>&lt;div id=&quot;Accordion1&quot; class=&quot;Accordion&quot;&gt;
&lt;/div&gt; </pre>
            </li>
            <li><span>Add panels to the accordion by inserting &lt;div class=&quot;AccordionPanel&quot;&gt; tags inside the &lt;div id=&quot;Accordion1&quot;...&gt; tag, as follows:</span>
                <pre>&lt;div id=&quot;Accordion1&quot; class=&quot;Accordion&quot;&gt;
	&lt;div class=&quot;AccordionPanel&quot;&gt;
	&lt;/div&gt;
	&lt;div class=&quot;AccordionPanel&quot;&gt;
	&lt;/div&gt;
&lt;/div&gt; </pre>
                <p>The preceding code adds two panels to the accordion. You can add unlimited 
                  panels.</p>
            </li>
            <li><span>To add tabs to the panels, insert div class=&quot;AccordionPanelTab&quot; tags inside each div class=&quot;AccordionPanel&quot; tag, as follows:</span>
                <pre>&lt;div class=&quot;AccordionPanel&quot;&gt;
	&lt;div class=&quot;AccordionPanelTab&quot;&gt;Panel 1 Title&lt;/div&gt;
&lt;/div&gt; </pre>
            </li>
            <li><span>To add a content area to the panels, insert div class=&quot;AccordionPanelContent&quot; tags in each div class=&quot;AccordionPanel&quot; tag, as follows:</span>
                <pre>&lt;div class=&quot;AccordionPanel&quot;&gt;
	&lt;div class=&quot;AccordionPanelTab&quot;&gt;Panel 1 Title&lt;/div&gt;
	&lt;div class=&quot;AccordionPanelContent&quot;&gt;Panel 1 Content&lt;/div&gt;
&lt;/div&gt; </pre>
                <p>Insert the content between the opening and closing AccordionPanelContent tags. For example, Panel 1 Content, as in the preceding example. The content 
                  can be any valid HTML code, including HTML form elements.</p>
            </li>
            <li><span>To initialize the Spry accordion object, insert the 
              following script block after the HTML code for the Accordion widget:</span>
                <pre>&lt;div id=&quot;Accordion1&quot; class=&quot;Accordion&quot;&gt;
. . .
&lt;/div&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
	var Accordion1 = new Spry.Widget.Accordion(&quot;Accordion1&quot;);
&lt;/script&gt; </pre>
                <p>The new JavaScript operator initializes the 
                  Accordion widget object, and transforms the div content with the ID of Accordion1 from static HTML 
                  code into an interactive accordion object. The Spry.Widget.Accordion method is a constructor in the Spry 
                  framework that creates accordion objects. The information necessary to 
                  initialize the object is contained in the SpryAccordion.js JavaScript library 
                  that you linked to at the beginning of this procedure.</p>
              <p>Make sure that the ID of the accordion’s div tag 
                matches the ID parameter you specified in the Spry.Widgets.Accordion method. Make sure that the 
                JavaScript call comes after the HTML code for the widget.</p>
            </li>
            <li><span>Save the page.</span>
                <p>The complete code looks as follows:</p>
              <pre>&lt;head&gt;
...
&lt;link href=&quot;SpryAssets/SpryAccordion.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; /&gt;
&lt;script src=&quot;SpryAssets/SpryAccordion.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
	&lt;div id=&quot;Accordion1&quot; class=&quot;Accordion&quot;&gt;
		&lt;div class=&quot;AccordionPanel&quot;&gt;
			&lt;div class=&quot;AccordionPanelTab&quot;&gt;Panel 1&lt;/div&gt;
			&lt;div class=&quot;AccordionPanelContent&quot;&gt;
				Panel 1 Content&lt;br/&gt;
				Panel 1 Content&lt;br/&gt;
				Panel 1 Content&lt;br/&gt;
			&lt;/div&gt;
		&lt;/div&gt;
		&lt;div class=&quot;AccordionPanel&quot;&gt;
			&lt;div class=&quot;AccordionPanelTab&quot;&gt;Panel 2&lt;/div&gt;
			&lt;div class=&quot;AccordionPanelContent&quot;&gt;
				Panel 2 Content&lt;br/&gt;
				Panel 2 Content&lt;br/&gt;
				Panel 2 Content&lt;br/&gt;
			&lt;/div&gt;
		&lt;/div&gt;
		&lt;div class=&quot;AccordionPanel&quot;&gt;
			&lt;div class=&quot;AccordionPanelTab&quot;&gt;Panel 3&lt;/div&gt;
			&lt;div class=&quot;AccordionPanelContent&quot;&gt;
				Panel 3 Content&lt;br/&gt;
				Panel 3 Content&lt;br/&gt;
				Panel 3 Content&lt;br/&gt;
			&lt;/div&gt;
		&lt;/div&gt;
		&lt;div class=&quot;AccordionPanel&quot;&gt;
			&lt;div class=&quot;AccordionPanelTab&quot;&gt;Panel 4&lt;/div&gt;
			&lt;div class=&quot;AccordionPanelContent&quot;&gt;
				Panel 4 Content&lt;br/&gt;
				Panel 4 Content&lt;br/&gt;
				Panel 4 Content&lt;br/&gt;
			&lt;/div&gt;
		&lt;/div&gt;
	&lt;/div&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
	var Accordion1 = new Spry.Widget.Accordion(&quot;Accordion1&quot;);
&lt;/script&gt;
&lt;/body&gt;</pre>
            </li>
          </ol>
          <!-- -->
          <h3 id="addpanel">Add a panel to an Accordion widget</h3>
          <span>&nbsp;Insert a div class=&quot;AccordionPanel&quot; tag (along with tags for a panel 
        tab and a panel content area) inside the container div tag for the accordion. Do not forget to add the closing &lt;/div&gt; tag when you add the code. For example:</span>
          <pre>&lt;div id=&quot;Accordion1&quot; class=&quot;Accordion&quot;&gt;
	&lt;div class=&quot;AccordionPanel&quot;&gt;
		&lt;div class=&quot;AccordionPanelTab&quot;&gt;&lt;/div&gt;
		&lt;div class=&quot;AccordionPanelContent&quot;&gt;&lt;/div&gt;
	&lt;/div&gt;
&lt;/div&gt;</pre>
          <p>The preceding code adds a panel to the Accordion widget. You can add 
            unlimited panels.</p>
          <!-- -->
          <h3 id="deletepanel">Delete a panel from an Accordion widget</h3>
          <span>&nbsp;Delete the desired div class=&quot;AccordionPanel&quot; tag (and its content or child 
        tags) from the container div tag for the accordion. Do 
        not forget to delete the closing /div tag when you 
        delete the code.</span>
          <!-- -->
          <h3 id="keynav">Enable keyboard navigation</h3>
          <p>Making widgets accessible for keyboard navigation is an important part of 
            every widget. Keyboard navigation lets the user control the widget with arrow 
            keys and custom keys.</p>
          <p>The foundation of keyboard navigation is the tabIndex attribute. This attribute tells the browser how to 
            navigate through the document.</p>
          <span>&nbsp;To enable keyboard 
        navigation on the accordion, add a TabIndex value to 
        the accordion container tag, as follows:</span>
          <pre>&lt;div id=&quot;Acc1&quot; class=&quot;Accordion&quot; tabIndex=&quot;0&quot;&gt;</pre>
          <p>If the tabIndex attribute has a value of zero (0), 
            the browser determines the order. If the tabIndex attribute has a positive integer value, that order value is used.</p>
          <span class="notetitle">Note: </span>Using tabIndex on a div tag 
          is not XHTML 1.0 compliant.
          <p>You can also set custom keys for keyboard navigation. Custom keys are set as 
            arguments of the accordion constructor script:</p>
          <pre>&lt;script type=&quot;text/javascript&quot;&gt;
var acc3= new Spry.Widget.Accordion(&quot;Acc3&quot;, { nextPanelKeyCode: 78 /* n key */, previousPanelKeyCode: 80 /* p key */ });
&lt;/script&gt;</pre>
          <!-- -->
          <h3 id="defaultpanel">Set the default open panel</h3>
          <p>You can set a certain panel to be open when the page containing the Accordion 
            widgets loads in a browser.</p>
          <span>&nbsp;Set the defaultPanel option in the constructor as follows:</span>
          <pre>&lt;script type=&quot;text/javascript&quot;&gt;
	var acc8 = new Spry.Widget.Accordion(&quot;Accordion1&quot;, { defaultPanel: 2 });
&lt;/script&gt;</pre>
          <span class="notetitle">Note: </span>The accordion panels use a 
          zero-based counting system, so setting the value to 2 opens the third 
          panel.
          <!-- -->
          <h3 id="openpanel">Open panels programatically</h3>
          <p>You can programatically open different panels by using JavaScript functions. 
            For example, you might have a button on your page that opens a particular 
            accordion panel when the user clicks the button.</p>
          <span>&nbsp;Use the following 
        JavaScript functions to open accordion panels:</span>
          <pre>&lt;input type=&quot;button&quot; onclick=&quot;acc10.openFirstPanel()&quot; &gt;open first panel&lt;/input&gt;
&lt;input type=&quot;button&quot; onclick=&quot;acc10.openNextPanel()&quot; &gt;open next panel&lt;/input&gt;
&lt;input type=&quot;button&quot; onclick=&quot;acc10.openPreviousPanel()&quot; &gt;open previous panel&lt;/input&gt;
&lt;input type=&quot;button&quot; onclick=&quot;acc10.openLastPanel()&quot; &gt;open last panel&lt;/input&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
	var acc10 = new Spry.Widget.Accordion(&quot;Accordion1&quot;);
&lt;/script&gt;</pre>
          <!-- -->
          <h3 id="customize">Customize the Accordion widget</h3>
          <p>The SpryAccordion.css file provides the default styling for the Accordion 
            widget. You can, however, easily customize the widget by changing the 
            appropriate CSS. The CSS rules in the SpryAccordion.css file use the same class 
            names as the related elements in the accordion’s HTML code, so it’s easy for you 
            to know which CSS rules correspond to the different sections of the Accordion 
            widget. Additionally, the SpryAccordion.css file contains class names for 
            behaviors that are related to the widget (for example, hovering and clicking 
            behaviors).</p>
          <p>The SpryAccordion.css file should already be included in your website before 
            you start customizing.</p>
          <span class="notetitle">Note: </span>Internet Explorer up to and 
          including version 6 does not support sibling and child contextual selectors (for 
          example, .AccordionPanel + .AccordionPanel or .Accordion &gt; .AccordionPanel).
          <!-- -->
          <h4>Style an Accordion widget (general instructions)</h4>
          <p>Set properties for the entire Accordion widget container, or set properties 
            for the components of the widget individually.</p>
          <ol>
            <li><span>Open the SpryAccordion.css file.</span> </li>
            <li><span>Locate the CSS rule for the part of the accordion to change. For 
              example, to change the background color of the accordion’s tabs, edit the AccordionPanelTab rule in the SpryAccordion.css 
              file.</span> </li>
            <li><span>Make your changes to the CSS and save the file.</span> </li>
          </ol>
          <p>You can replace style-related class names in the SpryAccordion.css file and 
            HTML code with class names of your own. Doing so does not affect the 
            functionality of the widget.</p>
          <p>The SpryAccordion.css file contains extensive comments, explaining the code 
            and the purpose for certain rules. For further information, see the comments in 
            the file.</p>
          <!-- -->
          <h4>Style Accordion widget text</h4>
          <p>Set properties for the entire Accordion widget container, or set properties 
            for the components of the widget individually.</p>
          <span>&nbsp;To change the text 
          styling of an Accordion widget, use the following table to locate the 
          appropriate CSS rule in the SpryAccordion.css file, and then add your own text 
          styling properties and values.</span>
          <table>
            <thead align="left">
              <tr>
                <th> <p>Text to change</p></th>
                <th> <p>Relevant CSS rule</p></th>
                <th> <p>Example of properties and values to add</p></th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td><p>Text in the entire accordion (includes both tab and content 
                  panel)</p></td>
                <td><p>.Accordion or .AccordionPanel</p></td>
                <td><p>font: Arial; font-size:medium;</p></td>
              </tr>
              <tr>
                <td><p>Text in accordion panel tabs only</p></td>
                <td><p>.AccordionPanelTab</p></td>
                <td><p>font: Arial; font-size:medium;</p></td>
              </tr>
              <tr>
                <td><p>Text in accordion content panels only</p></td>
                <td><p>.AccordionPanelContent</p></td>
                <td><p>font: Arial; 
                  font-size:medium;</p></td>
              </tr>
            </tbody>
          </table>
          <!-- -->
          <h4>Change Accordion widget background colors</h4>
          <span>&nbsp;Use the following table 
          to locate the appropriate CSS rule in the SpryAccordion.css file, and then add 
          or change background color properties and values.</span>
          <table>
            <thead align="left">
              <tr>
                <th> <p>Part of widget to change</p></th>
                <th> <p>Relevant CSS rule</p></th>
                <th> <p>Example of property and value to add or change</p></th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td><p>Background color of accordion panel tabs</p></td>
                <td><p>.AccordionPanelTab</p></td>
                <td><p>background-color: #CCCCCC; (This is the default value.)</p></td>
              </tr>
              <tr>
                <td><p>Background color of accordion content panels</p></td>
                <td><p>.AccordionPanelContent</p></td>
                <td><p>background-color: #CCCCCC;</p></td>
              </tr>
              <tr>
                <td><p>Background color of the open accordion panel</p></td>
                <td><p>.AccordionPanelOpen .AccordionPanelTab</p></td>
                <td><p>background-color: #EEEEEE; (This is the default value.)</p></td>
              </tr>
              <tr>
                <td><p>Background color of panel tabs on hover</p></td>
                <td><p>.AccordionPanelTabHover</p></td>
                <td><p>color: #555555; (This is the default value.)</p></td>
              </tr>
              <tr>
                <td><p>Background color of open panel tab on hover</p></td>
                <td><p>.AccordionPanelOpen .AccordionPanelTabHover </p></td>
                <td><p>color: #555555; (This is the default 
                  value.)</p></td>
              </tr>
            </tbody>
          </table>
          <!-- -->
          <h4>Constrain the width of an accordion</h4>
          <p>By default, the Accordion widget expands to fill available space. To 
            constrain the width of an Accordion widget, set a width property for the 
            accordion container.</p>
          <ol>
            <li><span>Locate the .Accordion CSS rule in the 
              SpryAccordion.css file. This rule defines properties for the main container 
              element of the Accordion widget.</span> </li>
            <li><span>Add a width property and value to the rule, for example width: 300px;.</span> </li>
          </ol>
          <!-- -->
          <h4>Change accordion panel height</h4>
          <p>By default, the height of Accordion widget panels is set to 200 pixels. To 
            change the height of panels, change the height property in the .AccordionPanelContent rule.</p>
          <ol>
            <li><span>Locate the .AccordionPanelContent CSS rule in the SpryAccordion.css 
              file.</span> </li>
            <li><span>Change the height property to a dimension of your 
              choosing.</span> <span class="notetitle">Note: </span>Always set this value to 
              ensure that accordion panel sizes are the 
              same.</li>
          </ol>
          <!-- -->
          <h4>Change accordion panel behaviors</h4>
          <p>The Accordion widget includes some predefined behaviors. These behaviors 
            consist of changing CSS classes when a particular event occurs. For example, 
            when a mouse pointer hovers over an accordion panel tab, Spry applies the 
            AccordionPanelTabHover class to the widget. (This behavior is similar to a:hover for links.) The behaviors are blank by default; to 
            change them, add properties and values to the rules.</p>
          <ol>
            <li><span>Open the SpryAccordion.css file and locate the CSS 
              rule for the accordion behavior to change. The Accordion widget includes four 
              built-in rules for behaviors.</span>
                <table>
                  <thead align="left">
                    <tr>
                      <th> <p>Behavior</p></th>
                      <th> <p>Description</p></th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td><p>.AccordionPanelTabHover</p></td>
                      <td><p>Activates when hovering over the panel tab</p></td>
                    </tr>
                    <tr>
                      <td><p>.AccordionPanelOpen</p></td>
                      <td><p>Activates on the tab of the open panel</p></td>
                    </tr>
                    <tr>
                      <td><p>.AccordionPanelClosed</p></td>
                      <td><p>Activates on the closed panels</p></td>
                    </tr>
                    <tr>
                      <td><p>.AccordionFocused</p></td>
                      <td><p>Activates when the entire accordion gets 
                        focus.</p></td>
                    </tr>
                  </tbody>
                </table>
              <p>For examples, see the Accordion sample file located in the samples 
                directory of the Spry directory that you downloaded from Adobe Labs. </p>
            </li>
            <li><span>Add CSS rules for any of the behaviors you want to 
              enable.</span> </li>
          </ol>
          <span class="notetitle">Note: </span>You cannot replace 
            behavior-related class names in the SpryAccordion.css file with class names of 
            your own because the behaviors are hard coded as part of the Spry framework. To 
            override the default class with your class names, send the new values as 
            arguments to the accordion constructor, as the following example shows:
          <pre>&lt;script type=&quot;text/javascript&quot;&gt;
	var acc2 = new Spry.Widget.Accordion(&quot;Acc2&quot;, { hoverClass: &quot;hover&quot;, openClass: &quot;open&quot;, closedClass: &quot;closed&quot;, focusedClass: &quot;focused&quot; });
&lt;/script&gt;</pre>
          <!-- -->
          <h3 id="animation">Turn off panel animation</h3>
<p>By default, accordion panels use animation to smoothly open and close. You 
            can turn this animation off, however, so that the panels instantly open and 
            close.</p>
          <span>&nbsp;To turn off animation, 
          send an argument in the accordion constructor, as follows:</span>
          <pre>&lt;script type=&quot;text/javascript&quot;&gt;
	var acc5 = new Spry.Widget.Accordion(&quot;Acc5&quot;, { enableAnimation: false });
&lt;/script&gt;</pre>
          <!-- -->
          <h3 id="duration">Set panel animation timing</h3>
<p>You can change the time it takes for a panel to open. Set the time in 
            milliseconds (1000 = 1 second). By default, Spry uses 500 
            milliseconds.</p>
          <span>&nbsp;Add the duration option 
          to the constructor:</span>
          <pre>&lt;script type=&quot;text/javascript&quot;&gt;
	var acc9 = new Spry.Widget.Accordion(&quot;Acc9&quot;, { duration: 100 });
&lt;/script&gt;</pre>
          <!-- -->
          <h3 id="panelheight">Set variable panel heights</h3>
<p>By default, when animation is enabled, Spry forces all accordion content 
            panels to use the same height. Spry derives this height from the height of the 
            default open panel of the accordion, which is determined by CSS or by the height 
            of the content in the panel.</p>
          <p>The accordion also supports variable height panels. To turn this support on, 
            pass a useFixedPanelHeights: false option to the 
            accordion's constructor.</p>
          <span>&nbsp;Pass a useFixedPanelHeights:false option as follows:</span>
          <pre>&lt;script type=&quot;text/javascript&quot;&gt;
	var acc7 = new Spry.Widget.Accordion(&quot;Acc7&quot;, { useFixedPanelHeights: false });
&lt;/script&gt;</pre>
          <p>For an example, see the Accordion sample file located in the samples 
            directory of the Spry directory that you downloaded from Adobe Labs.</p>
          <p>To have Spry set the panel height to a set value in JavaScript (rather than 
            CSS code), pass the fixedPanelHeight option that 
            programatically sets the content panel heights. Pixels are used for this 
            option.</p>
          <pre>&lt;script type=&quot;text/javascript&quot;&gt;
	var acc7 = new Spry.Widget.Accordion(&quot;Acc7&quot;, { fixedPanelHeight: &quot;300px&quot; });
&lt;/script&gt;</pre>
          <p>Note: When using Variable Panel Heights, the cursor will turn to a hand for the open panel. This is expected because the panel can still close onclick. It can be overridden by editing the accordion class:</p>
          <pre>
.AccordionPanelOpen {
  cursor: auto;
 }</pre>
<hr />
          <p>Copyright © 2006. Adobe Systems Incorporated. <br />
            All rights reserved</p>
</body>
</html>
